<template>
<!-- 插值指令:将此处显示 -->
  <h1>文本相关指令</h1>
  <p>{{ abc }}</p>
  <h1>{{ abc }}</h1>
  <h3>{{ abc }}</h3>
<!-- 响应式变量的值也可以拼接 -->
  {{abc+'早上好!'}}
  <hr>
<!--给按钮绑定一个点击事件-->
  <button @click="f()">我是按钮</button>

  <p v-text="abc"></p>
  <p v-html="abc"></p>
</template>

<script setup>
import {ref} from "vue";
//响应式变量
const abc = ref("测试文本");

const f=()=>{//箭头函数 固定写法(参数列表)=>{方法体}
  abc.value='值变了!';//在JS中使用响应式变量的值,必须.value!!!
  abc.value='值<b>更新</b>了!';
}
</script>

<style scoped>

</style>